<script setup lang="ts">
// 引入ref
import { ref } from "vue"
// 引入标题
import indexTitle from "./indexTitle.vue";
// 引入监控画面接口
import { getMonitorPicture } from "@/api/index"

// 发起请求
getMonitorPicture().then(res => {
    // console.log(res);
    const result = res.data.data.result[0]
    // console.log(result);
})
</script>



<template>
    <!-- 右边内容 -->
    <div class="right-content_container">
        <!-- 标题 -->
        <index-title title="监控画面"></index-title>
        <!-- 视频内容 
            autoplay 自动播放
            controls 显示浏览器自带布局 控制面板
            muted 是否静音

        -->
        <div class="box" :style="`width:'100%'`" flex="~ col" p3 justify-center items-center bg-dark>
            <dv-border-box1 ref="borderRef">
                <video controls autoplay muted width="250">
                    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
                </video>
            </dv-border-box1>
            <dv-border-box1 ref="borderRef">
                <video id="chssesmyvghjdbiywz" controls autoplay muted>
                    <source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" />
                </video>

            </dv-border-box1>
            <dv-border-box1 ref="borderRef">
                <video controls autoplay muted>
                    <source src="https://media.w3.org/2010/05/sintel/trailer.mp4" />
                </video>
            </dv-border-box1>
        </div>

    </div>
</template>


<style scoped lang="scss">
.right-content_container {
    width: 100%;
    height: 100%;

    .box {
        width: 100%;
        height: calc(100%);
        display: flex;
        flex-direction: column;

        >div:nth-child(2) {
            margin: 5px 0;

        }

        video {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            padding: 15px;
            box-sizing: border-box;

            border-radius: 30px;
        }
    }
}
</style>